<template>
    <el-button @click="Add">保存</el-button>
<!-- 居中 -->
<span style="font-size: 24px; font-weight:250; margin-bottom: 10px; display: flex; justify-content: center; align-items: center">客户档案</span>
<!-- 表单居中 -->
<el-form :model="form" label-width="auto" style="flex-wrap: wrap; justify-content: center; align-items: center"   ref="ruleFormRef" :rules="rules">  
  <table>
    <tr>
        <td colspan="3" style="text-align:left">
                <span >基本信息</span>
            </td>
    </tr>
    <tr>
        <td>
            <el-form-item label="客户名称">
      <el-input v-model="form.updDtos.clientName" />
    </el-form-item> 
        </td>

        <td>
            <el-form-item label="客户编号">
      <el-input v-model="form.updDtos.clientNumber" disabled />
    </el-form-item> 
        </td>
        <td>
            <el-form-item label="客户类别">
      <el-tree-select
    v-model="form.updDtos.cId"
    :data="Product"
    :render-after-expand="false"
    style="width: 240px"
  />
    </el-form-item> 
        </td>
        <td>
            <el-form-item label="跟进方式">
      <el-select v-model="form.updDtos.cfUmanner" placeholder="请选择"  style="width: 240px">
        <el-option label="电话跟进" :value="1" />
        <el-option label="面谈" :value="2" />
        <el-option label="微信跟进" :value="3" />
        <el-option label="QQ跟进" :value="4" />
        <el-option label="邮箱跟进" :value="5" />
      </el-select>
    </el-form-item> 
        </td>
    </tr>
    <tr>
        <td><el-form-item label="省份">
    <el-select v-model="form.updDtos.provinceId" placeholder="请选择省份" style="width: 200px;" @change="getCity(form.addDtos.provinceId)" >
        <el-option label="请选择" :value=0  />
        <el-option v-for="item in Province" :key="item.provinceId" :label="item.provinceName" :value=item.provinceId  />
      </el-select>
  </el-form-item></td>
      <td>  
  <el-form-item label="城市">
    <el-select v-model="form.updDtos.cityId" placeholder="请选择城市" style="width: 200px;">
        <el-option label="请选择" :value=0  />
        <el-option v-for="item in City" :key="item.cityId" :label="item.cityName" :value=item.cityId  />
      </el-select>
  </el-form-item></td>
        <td>
    <el-form-item label="来源途径">
      <el-select v-model="form.updDtos.cSourceWay" placeholder="请选择"  style="width: 240px">
        <el-option label="现有客户" :value="1" />
        <el-option label="当前资讯" :value="2" />
        <el-option label="网络平台" :value="3" />
        <el-option label="展会" :value="4" />
        <el-option label="外出拜访" :value="5" />
        <el-option label="供应商" :value="6" />
        <el-option label="推广" :value="7" />
        <el-option label="市场挖掘" :value="8" />
      </el-select>
    </el-form-item>
        </td>
        <td><el-form-item label="所属行业">
      <el-select v-model="form.updDtos.cIndustry" placeholder="请选择"  style="width: 240px">
        <el-option label="零售" :value="1" />
        <el-option label="制造" :value="2" />
        <el-option label="制药厂" :value="3" />
        <el-option label="工程" :value="4" />
        <el-option label="原厂商" :value="5" />
        <el-option label="服务商" :value="6" />
        <el-option label="代理商" :value="7" />
        <el-option label="金融业" :value="8" />
        <el-option label="教育" :value="9" />
        <el-option label="医疗" :value="10" />
        <el-option label="互联网" :value="11" />
        <el-option label="传媒" :value="12" />
      </el-select>
    </el-form-item></td>
    </tr>
   <tr>
    <td>
        <el-form-item label="客户价值">
      <el-select v-model="form.updDtos.customerValue" placeholder="请选择"  style="width: 240px">
        <el-option label="很高" :value="1" />
        <el-option label="较高" :value="2" />
        <el-option label="一般" :value="3" />
        <el-option label="较低" :value="4" />
        <el-option label="很低" :value="5" />
      </el-select>
    </el-form-item> 
    </td>
    <td>
        <el-form-item label="信用等级">
      <el-select v-model="form.updDtos.creditRating" placeholder="请选择"  style="width: 240px">
        <el-option label="高" :value="1" />
        <el-option label="中" :value="2" />
        <el-option label="低" :value="3" />
      </el-select>
    </el-form-item> 
    </td>
    <td colspan="2">
        <el-form-item label="公司地址">
      <el-input v-model="form.updDtos.companyAddress" />
    </el-form-item> 
    </td>
   </tr>
<tr>
  
    <td colspan="4">
        <el-form-item label="公司简介">
      <textarea style='width: 100%; height: 100px' v-model="form.updDtos.companyProfile" >
        </textarea>
    </el-form-item> 
    </td>
 

</tr>



     <tr>
        <td colspan="3" style="text-align:left">
                <span >主要联系人信息</span>
            </td>
     </tr>
     <tr>
        <td>
            <el-form-item label="联系人信息">
      <el-input v-model="form.updDtos.cPrimaryContact" />
    </el-form-item>  
        </td>
        <td>
            <el-form-item label="性别">
                <el-radio-group v-model="form.updDtos.cGender">
      <el-radio value="男" size="large">男</el-radio>
      <el-radio value="女" size="large">女</el-radio>
    </el-radio-group>
    </el-form-item>  
        </td>

<td>
    <el-form-item label="部门">
      <el-select v-model="form.updDtos.cDepartment" placeholder="请选择"  style="width: 240px">
        <el-option v-for="item in Sector" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>  

</td>
<td>
            <el-form-item label="手机号码">
      <el-input v-model="form.updDtos.cPhone" />
    </el-form-item>  
        </td>
     </tr>




  </table>
 

</el-form>  

</template>
<script setup lang='ts'>
import {ref,onMounted,reactive} from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()
import http from '../../../http.js'
const form = reactive({
  updDtos: {
    clientId:route.query.id,
    clientName: "",
    clientNumber: "",
    cId: '',
    cfUmanner: '',
    provinceId: 0,
    cityId: 0,
    cSourceWay: '',
    cIndustry: '',
    customerValue: '',
    creditRating: '',
    companyAddress: "",
    companyProfile: "",
    cPrimaryContact: "",
    cGender:"男",
    cDepartment: '',
    cPhone: "",
    cPickingStatus: 1,
    cApplicant: "",
    cRecipients: "",
    cPickTime:''
  }
})
onMounted(()=>{
   //form.addDtos.clientNumber = 'KH' + Math.floor(100000 + Math.random() * 900000); 
    ProductType();
    getProvince();
    GetSectorList();
    BlickFill();
})
//省份
var Province=ref([]);
const getProvince = () => {
    axios.get(http.zblnb+'/cg/api/Vendor/ProvinceSelect').then(res=>{
    if(res.data.code==200){
        Province.value=res.data.data
    }
    console.log(Province.value)
})
}
//城市
var City=ref([]);
const getCity = (id:number) => {
    axios.get(http.zblnb+'/cg/api/Vendor/CitySelect?ProvinceId='+id).then(res=>{
    if(res.data.code==200){
        City.value=res.data.data
    }
    console.log(City.value)
});
}

var Product=ref([]);
const ProductType=()=>{
    axios.get(http.zblnb + '/vendor/api/Client/ProductTypeSelect').then(res=>{
        Product.value=res.data.data
    })
}
var Sector=ref([]);
const GetSectorList=()=>{
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList').then(res=>{
        Sector.value=res.data.data
    })
}    

//修改
const Add=()=>{
    console.log(form.updDtos)
axios.post(http.zblnb + '/vendor/api/Client/ClientUpd', {
  updDtos:form.updDtos
    }).then(res=>{
    console.log(res.data)
    if(res.data.code==200)
{
    ElMessage.success('修改成功')
    router.push('/ClientShow')
}
})
}

//alert(route.query.id)
//反填
   //反填供应商
   const BlickFill = () => {
        axios.get(http.zblnb + '/vendor/api/Client/ClientBlikShow?Id='+route.query.id).then(res => {
        console.log(res.data.data)
          if(res.data.code==200)
        {
            form.updDtos.clientName=res.data.data[0].clientName
            form.updDtos.clientNumber=res.data.data[0].clientNumber
            form.updDtos.cId=res.data.data[0].cId
            form.updDtos.cfUmanner=res.data.data[0].cfUmanner
            form.updDtos.provinceId=res.data.data[0].provinceId
            getCity(res.data.data[0].provinceId)
            form.updDtos.cityId=res.data.data[0].cityId
            form.updDtos.cIndustry=res.data.data[0].cIndustry
            form.updDtos.customerValue=res.data.data[0].customerValue
            form.updDtos.creditRating=res.data.data[0].creditRating
            form.updDtos.companyAddress=res.data.data[0].companyAddress
            form.updDtos.companyProfile=res.data.data[0].companyProfile
            form.updDtos.cPrimaryContact=res.data.data[0].cPrimaryContact
            form.updDtos.cGender=res.data.data[0].cGender
            form.updDtos.cDepartment=res.data.data[0].cDepartment
            form.updDtos.cPhone=res.data.data[0].cPhone
            form.updDtos.cPickingStatus=res.data.data[0].cPickingStatus
            form.updDtos.cApplicant=res.data.data[0].cApplicant||''
            form.updDtos.cPickTime=res.data.data[0].cPickTime
            form.updDtos.cSourceWay=res.data.data[0].cSourceWay
        }
        })
    }

</script>